<template>
	<div class="about" id="message">
		<div class="site-content">
			<div class="content-warp">
				<div class="about-me about-info">
					<section-title><span></span>给我留言</section-title>
					<div class="info-card">
						<div class="contactForm">
							<messageEditor :successCallback="submitRemark"></messageEditor>
						</div>
					</div>
				</div>
				<div class="all-message about-info">
					<section-title id="Guestbook"><span></span>所有留言</section-title>
					<div class="remarks">
						<comment v-for="item in remarks" :key="item.id" :comment="item" :commentId="item.id">
							<template v-if="item.replys.length">
								<comment v-for="reply in item.replys" :key="reply.id" :commentId="item.id"
									:comment="reply"></comment>
							</template>
						</comment>
						<div style="text-align: center;">
							<el-pagination @current-change="handleSizeChange" background
								layout="total, prev, pager, next, jumper" :total="remarks_total"
								:page-size="page.pageSize" :hide-on-single-page="true">
							</el-pagination>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import message from '@/assets/js/message.js'
	export default {
	  name: 'message',
	  mixins: [
	    message
	  ],
	  mounted () {
	  },
	  beforeDestroy () {
	  }
	}
</script>
<style lang="less" src="@/assets/css/message.less"></style>
<style scoped lang="less" src="@/assets/css/message_sco.less"></style>
